<template>
  <div>
    TodoList
    <input type="text" v-model="msg" @keyup.enter="handleEnter" />
    <h2>进行中</h2>
    <p>{{ msg }}</p>
    <div v-for="item of run" :key="item">
      <input type="checkbox" value="false" @click="toDone(item)" />
      {{item}}
    </div>
    <h2>已完成</h2>
    <div v-for="item of done" :key="item">
      <input type="checkbox" @click="toRun(item)" value="" checked />
      {{item}}
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import {setLocalStroage,getLocalStroage} from "../assets/js/storage.js";
export default {
  setup() {
    const state = reactive({
      msg: "",
      run: [],
      done: [],
      handleEnter() {
        if (!state.run.includes(state.msg)) {
          state.run.unshift(state.msg);
          state.msg = "";
        } 
       
        setLocalStroage("runs", state.run);
      },
      toDone(val) {
        var index = state.run.indexOf(val);
        state.run.splice(index, 1);
        state.done.push(val);
        setLocalStroage("runs", state.run);
        setLocalStroage("dones", state.done);
      },
      toRun(val) {
        var index = state.done.indexOf(val);
        state.done.splice(index, 1);
        state.run.push(val);
        setLocalStroage("runs", state.run);
        setLocalStroage("dones", state.done);
      },
    });
    onMounted(() => {
      console.log(getLocalStroage("runs"));
      state.run = getLocalStroage("runs") ? getLocalStroage("runs") : [];
      state.done = getLocalStroage("dones") ? getLocalStroage("dones") : [];
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style>
</style>